import React, { Component, lazy, Suspense } from "react";
// import Child from "./Child";

// 需要用到import函数去做动态引入
const Child = lazy(() => import("./Child"));

const Loading = () => {
  return <div>拼命加载中...</div>;
};

class App extends Component {
  state = {
    show: false,
  };

  fn = () => {
    this.setState({
      show: true,
    });
  };

  render() {
    return (
      <>
        <h2>lazy组件懒加载</h2>
        <button onClick={this.fn}>btn</button>
        {/* lazy要和Suspense一起使用 */}
        {/* Suspense需要加一个fallback属性，里面引入组件，当网速比较慢的时候，组件还没有加载进来时，暂时的显示 */}
        <Suspense fallback={<Loading />}>
          {this.state.show && <Child />}
        </Suspense>
      </>
    );
  }
}

export default App;
